﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title></title>

<script src="http://www.google.com/jsapi"></script>

<script type="text/javascript"> 
 //<![CDATA[

google.load("jquery", "1");
google.load("jqueryui", "1");
google.load('visualization', '1', { packages: ['gauge'] });

function OnLoad() {

    $('#content').html('<div id="draggable-handle-div" style="width:100px;border:1px solid #999;">' +
                    '<div style="background-color:#999">dragme</div>content</div>');
    $("#draggable-handle-div").draggable({
        "handle": "div"
    });

    drawVisualization();
    drawChart();

}
google.setOnLoadCallback(OnLoad);

function drawVisualization() {
    // Create and populate the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Label');
    data.addColumn('number', 'Value');
    data.addRows(3);
    data.setValue(0, 0, 'Memory');
    data.setValue(0, 1, 80);
    data.setValue(1, 0, 'CPU');
    data.setValue(1, 1, 55);
    data.setValue(2, 0, 'Network');
    data.setValue(2, 1, 68);

    // Create and draw the visualization.
    new google.visualization.Gauge(document.getElementById('visualization')).
      draw(data);
}

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Label');
    data.addColumn('number', 'Value');
    data.addRows([
          ['Memory', 80],
          ['CPU', 55],
          ['Network', 68]
        ]);

    var options = {
        width: 400, height: 120,
        redFrom: 90, redTo: 100,
        yellowFrom: 75, yellowTo: 90,
        minorTicks: 5
    };

    var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
    chart.draw(data, options);
}

//]]>
</script>
</head>


<body>

    <p id='content'>content</p>
    <div id='visualization'></div>
    <div id='chart_div'></div>

</body>

</html>
